<template>
  <div class="media-batch-process-view">
    <!-- 页面头部 -->
    <div class="page-header glass-card">
      <div class="header-content">
        <div class="header-left">
          <button class="back-btn" @click="goBack">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M19 12H5M12 19l-7-7 7-7" stroke="currentColor" stroke-width="2"/>
            </svg>
            返回
          </button>
        </div>

        <div class="header-info">
          <h1 class="page-title">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M2 3h6l4 4h12v2H8.828l-2-2H2V3zM2 7h16l-2 8H4L2 7z" stroke="currentColor" stroke-width="2"/>
            </svg>
            批量媒体处理
          </h1>
          <p class="page-description">对选中的媒体文件进行批量编辑、转换和处理</p>
        </div>

        <div class="header-stats">
          <div class="stat-item">
            <span class="stat-value">{{ selectedFiles.length }}</span>
            <span class="stat-label">已选择文件</span>
          </div>
          <div class="stat-item">
            <span class="stat-value">{{ processingTasks.length }}</span>
            <span class="stat-label">处理任务</span>
          </div>
          <div class="stat-item">
            <span class="stat-value">{{ completedTasks }}</span>
            <span class="stat-label">已完成</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容 -->
    <div class="main-content">
      <div class="content-grid">
        <!-- 左侧：文件选择和操作面板 -->
        <div class="operations-section">
          <!-- 文件选择器 -->
          <div class="file-selector-card glass-card">
            <div class="card-header">
              <h2 class="card-title">
                <svg fill="none" viewBox="0 0 24 24">
                  <rect height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="18" x="3" y="3"/>
                  <circle cx="8.5" cy="8.5" r="1.5" stroke="currentColor" stroke-width="2"/>
                  <polyline points="21,15 16,10 5,21" stroke="currentColor" stroke-width="2"/>
                </svg>
                选择文件
              </h2>
              <div class="card-actions">
                <button class="select-btn" @click="openFileBrowser">
                  <svg fill="none" viewBox="0 0 24 24">
                    <rect stroke="currentColor" stroke-width="2" x="22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
                  </svg>
                  浏览文件
                </button>
                <button :disabled="selectedFiles.length === 0" class="clear-btn" @click="clearSelection">
                  <svg fill="none" viewBox="0 0 24 24">
                    <line stroke="currentColor" stroke-width="2" x1="18" x2="6" y1="6" y2="18"/>
                    <line stroke="currentColor" stroke-width="2" x1="6" x2="18" y1="6" y2="18"/>
                  </svg>
                  清除选择
                </button>
              </div>
            </div>

            <div class="card-content">
              <!-- 文件拖拽区域 -->
              <div
                :class="{ active: isDragging }"
                class="drop-zone"
                @drop="handleDrop"
                @dragover.prevent
                @dragenter.prevent="isDragging = true"
                @dragleave.prevent="isDragging = false"
              >
                <div class="drop-zone-content">
                  <svg class="drop-icon" fill="none" viewBox="0 0 24 24">
                    <path d="M7 10l5-5 5 5M12 5v12" stroke="currentColor" stroke-width="2"/>
                  </svg>
                  <h3>拖拽文件到此处</h3>
                  <p>或点击"浏览文件"选择要处理的媒体文件</p>
                </div>
              </div>

              <!-- 选中文件列表 -->
              <div v-if="selectedFiles.length > 0" class="selected-files">
                <div class="files-header">
                  <span class="files-count">{{ selectedFiles.length }} 个文件</span>
                  <span class="files-size">总大小: {{ formatFileSize(totalSize) }}</span>
                </div>
                <div class="files-list">
                  <div
                    v-for="(file, index) in selectedFiles"
                    :key="index"
                    class="file-item"
                  >
                    <div class="file-thumbnail">
                      <img v-if="file.type.startsWith('image/')" :alt="file.name" :src="getFilePreview(file)" />
                      <div v-else :class="getFileTypeClass(file.type)" class="file-icon">
                        <component :is="getFileTypeIcon(file.type)" />
                      </div>
                    </div>
                    <div class="file-info">
                      <h4 class="file-name">{{ file.name }}</h4>
                      <div class="file-meta">
                        <span class="file-size">{{ formatFileSize(file.size) }}</span>
                        <span class="file-type">{{ getFileTypeLabel(file.type) }}</span>
                      </div>
                    </div>
                    <button class="remove-file" @click="removeFile(index)">
                      <svg fill="none" viewBox="0 0 24 24">
                        <line stroke="currentColor" stroke-width="2" x1="18" x2="6" y1="6" y2="18"/>
                        <line stroke="currentColor" stroke-width="2" x1="6" x2="18" y1="6" y2="18"/>
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 处理操作选择 -->
          <div class="operations-card glass-card">
            <div class="card-header">
              <h2 class="card-title">
                <svg fill="none" viewBox="0 0 24 24">
                  <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
                  <path d="M12 1v6M12 17v6M4.22 4.22l4.24 4.24M15.54 15.54l4.24 4.24M1 12h6M17 12h6M4.22 19.78l4.24-4.24M15.54 8.46l4.24-4.24" stroke="currentColor" stroke-width="2"/>
                </svg>
                选择操作
              </h2>
            </div>

            <div class="card-content">
              <div class="operation-tabs">
                <button
                  v-for="tab in operationTabs"
                  :key="tab.id"
                  :class="{ active: activeTab === tab.id }"
                  class="tab-btn"
                  @click="activeTab = tab.id"
                >
                  <component :is="tab.icon" />
                  {{ tab.label }}
                </button>
              </div>

              <!-- 格式转换 -->
              <div v-show="activeTab === 'convert'" class="operation-panel">
                <h3 class="panel-title">格式转换</h3>
                <div class="conversion-options">
                  <div class="option-group">
                    <label class="option-label">目标格式</label>
                    <select v-model="convertOptions.targetFormat" class="format-select">
                      <optgroup label="图片格式">
                        <option value="jpeg">JPEG</option>
                        <option value="png">PNG</option>
                        <option value="webp">WebP</option>
                        <option value="avif">AVIF</option>
                      </optgroup>
                      <optgroup label="视频格式">
                        <option value="mp4">MP4</option>
                        <option value="webm">WebM</option>
                        <option value="avi">AVI</option>
                      </optgroup>
                      <optgroup label="音频格式">
                        <option value="mp3">MP3</option>
                        <option value="aac">AAC</option>
                        <option value="wav">WAV</option>
                        <option value="flac">FLAC</option>
                      </optgroup>
                    </select>
                  </div>
                  <div class="option-group">
                    <label class="option-label">质量设置</label>
                    <div class="quality-slider">
                      <input
                        v-model="convertOptions.quality"
                        class="slider"
                        max="100"
                        min="1"
                        type="range"
                      />
                      <span class="quality-value">{{ convertOptions.quality }}%</span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 图片处理 -->
              <div v-show="activeTab === 'image'" class="operation-panel">
                <h3 class="panel-title">图片处理</h3>
                <div class="image-options">
                  <div class="option-group">
                    <label class="option-label">尺寸调整</label>
                    <div class="resize-controls">
                      <div class="size-input">
                        <label>宽度</label>
                        <input v-model.number="imageOptions.width" placeholder="自动" type="number" />
                      </div>
                      <div class="size-input">
                        <label>高度</label>
                        <input v-model.number="imageOptions.height" placeholder="自动" type="number" />
                      </div>
                      <label class="checkbox-label">
                        <input v-model="imageOptions.keepAspectRatio" type="checkbox" />
                        保持宽高比
                      </label>
                    </div>
                  </div>
                  <div class="option-group">
                    <label class="option-label">图片增强</label>
                    <div class="enhancement-controls">
                      <div class="enhancement-item">
                        <label>亮度</label>
                        <input v-model="imageOptions.brightness" max="100" min="-100" type="range" />
                        <span>{{ imageOptions.brightness }}%</span>
                      </div>
                      <div class="enhancement-item">
                        <label>对比度</label>
                        <input v-model="imageOptions.contrast" max="100" min="-100" type="range" />
                        <span>{{ imageOptions.contrast }}%</span>
                      </div>
                      <div class="enhancement-item">
                        <label>饱和度</label>
                        <input v-model="imageOptions.saturation" max="100" min="-100" type="range" />
                        <span>{{ imageOptions.saturation }}%</span>
                      </div>
                    </div>
                  </div>
                  <div class="option-group">
                    <label class="option-label">水印设置</label>
                    <div class="watermark-controls">
                      <label class="checkbox-label">
                        <input v-model="imageOptions.addWatermark" type="checkbox" />
                        添加水印
                      </label>
                      <div v-if="imageOptions.addWatermark" class="watermark-settings">
                        <input v-model="imageOptions.watermarkText" placeholder="水印文字" type="text" />
                        <select v-model="imageOptions.watermarkPosition">
                          <option value="top-left">左上角</option>
                          <option value="top-right">右上角</option>
                          <option value="bottom-left">左下角</option>
                          <option value="bottom-right">右下角</option>
                          <option value="center">居中</option>
                        </select>
                        <div class="opacity-control">
                          <label>透明度</label>
                          <input v-model="imageOptions.watermarkOpacity" max="100" min="0" type="range" />
                          <span>{{ imageOptions.watermarkOpacity }}%</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 压缩优化 -->
              <div v-show="activeTab === 'compress'" class="operation-panel">
                <h3 class="panel-title">压缩优化</h3>
                <div class="compress-options">
                  <div class="option-group">
                    <label class="option-label">压缩强度</label>
                    <div class="compression-levels">
                      <label class="radio-label">
                        <input v-model="compressOptions.level" type="radio" value="low" />
                        <div class="radio-content">
                          <strong>轻度压缩</strong>
                          <span>保持高质量，文件略小</span>
                        </div>
                      </label>
                      <label class="radio-label">
                        <input v-model="compressOptions.level" type="radio" value="medium" />
                        <div class="radio-content">
                          <strong>中度压缩</strong>
                          <span>质量与大小平衡</span>
                        </div>
                      </label>
                      <label class="radio-label">
                        <input v-model="compressOptions.level" type="radio" value="high" />
                        <div class="radio-content">
                          <strong>高度压缩</strong>
                          <span>最小文件大小</span>
                        </div>
                      </label>
                    </div>
                  </div>
                  <div class="option-group">
                    <label class="option-label">目标大小限制</label>
                    <div class="size-limit-controls">
                      <label class="checkbox-label">
                        <input v-model="compressOptions.enableSizeLimit" type="checkbox" />
                        启用大小限制
                      </label>
                      <div v-if="compressOptions.enableSizeLimit" class="size-limit-input">
                        <input v-model.number="compressOptions.maxSize" min="1" type="number" />
                        <select v-model="compressOptions.sizeUnit">
                          <option value="KB">KB</option>
                          <option value="MB">MB</option>
                        </select>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 批量重命名 -->
              <div v-show="activeTab === 'rename'" class="operation-panel">
                <h3 class="panel-title">批量重命名</h3>
                <div class="rename-options">
                  <div class="option-group">
                    <label class="option-label">命名规则</label>
                    <div class="naming-rules">
                      <label class="radio-label">
                        <input v-model="renameOptions.mode" type="radio" value="prefix" />
                        <div class="radio-content">
                          <strong>添加前缀</strong>
                          <input v-model="renameOptions.prefix" :disabled="renameOptions.mode !== 'prefix'" placeholder="前缀内容" type="text" />
                        </div>
                      </label>
                      <label class="radio-label">
                        <input v-model="renameOptions.mode" type="radio" value="suffix" />
                        <div class="radio-content">
                          <strong>添加后缀</strong>
                          <input v-model="renameOptions.suffix" :disabled="renameOptions.mode !== 'suffix'" placeholder="后缀内容" type="text" />
                        </div>
                      </label>
                      <label class="radio-label">
                        <input v-model="renameOptions.mode" type="radio" value="replace" />
                        <div class="radio-content">
                          <strong>查找替换</strong>
                          <div class="replace-inputs">
                            <input v-model="renameOptions.findText" :disabled="renameOptions.mode !== 'replace'" placeholder="查找文本" type="text" />
                            <input v-model="renameOptions.replaceText" :disabled="renameOptions.mode !== 'replace'" placeholder="替换为" type="text" />
                          </div>
                        </div>
                      </label>
                      <label class="radio-label">
                        <input v-model="renameOptions.mode" type="radio" value="template" />
                        <div class="radio-content">
                          <strong>模板命名</strong>
                          <input v-model="renameOptions.template" :disabled="renameOptions.mode !== 'template'" placeholder="例如: IMG_{index}_{date}" type="text" />
                        </div>
                      </label>
                    </div>
                  </div>
                  <div class="option-group">
                    <label class="option-label">预览效果</label>
                    <div class="rename-preview">
                      <div
                        v-for="(file, index) in selectedFiles.slice(0, 3)"
                        :key="index"
                        class="preview-item"
                      >
                        <span class="original-name">{{ file.name }}</span>
                        <svg fill="none" viewBox="0 0 24 24">
                          <path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2"/>
                        </svg>
                        <span class="new-name">{{ generateNewName(file.name, index) }}</span>
                      </div>
                      <div v-if="selectedFiles.length > 3" class="more-files">
                        和其他 {{ selectedFiles.length - 3 }} 个文件...
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 元数据编辑 -->
              <div v-show="activeTab === 'metadata'" class="operation-panel">
                <h3 class="panel-title">元数据编辑</h3>
                <div class="metadata-options">
                  <div class="option-group">
                    <label class="option-label">标签管理</label>
                    <div class="tags-input">
                      <div class="current-tags">
                        <span
                          v-for="tag in metadataOptions.tags"
                          :key="tag"
                          class="tag-item"
                        >
                          {{ tag }}
                          <button @click="removeTag(tag)">
                            <svg fill="none" viewBox="0 0 24 24">
                              <line stroke="currentColor" stroke-width="2" x1="18" x2="6" y1="6" y2="18"/>
                              <line stroke="currentColor" stroke-width="2" x1="6" x2="18" y1="6" y2="18"/>
                            </svg>
                          </button>
                        </span>
                      </div>
                      <input
                        v-model="newTag"
                        placeholder="输入标签后按回车添加"
                        type="text"
                        @keyup.enter="addTag"
                      />
                    </div>
                  </div>
                  <div class="option-group">
                    <label class="option-label">描述信息</label>
                    <textarea
                      v-model="metadataOptions.description"
                      placeholder="为所有文件添加描述信息"
                      rows="3"
                    ></textarea>
                  </div>
                  <div class="option-group">
                    <label class="option-label">版权信息</label>
                    <div class="copyright-inputs">
                      <input v-model="metadataOptions.author" placeholder="作者/摄影师" type="text" />
                      <input v-model="metadataOptions.copyright" placeholder="版权声明" type="text" />
                    </div>
                  </div>
                  <div class="option-group">
                    <label class="option-label">地理位置</label>
                    <div class="location-inputs">
                      <input v-model="metadataOptions.location" placeholder="拍摄地点" type="text" />
                      <div class="coordinates">
                        <input v-model.number="metadataOptions.latitude" placeholder="纬度" step="0.000001" type="number" />
                        <input v-model.number="metadataOptions.longitude" placeholder="经度" step="0.000001" type="number" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="card-footer">
              <button
                :disabled="selectedFiles.length === 0 || isProcessing"
                class="process-btn"
                @click="startProcessing"
              >
                <svg v-if="!isProcessing" fill="none" viewBox="0 0 24 24">
                  <polygon fill="currentColor" points="5,3 19,12 5,21"/>
                </svg>
                <svg v-else class="spinner" fill="none" viewBox="0 0 24 24">
                  <circle cx="12" cy="12" fill="none" r="10" stroke="currentColor" stroke-dasharray="31.416" stroke-dashoffset="31.416" stroke-width="4"/>
                </svg>
                {{ isProcessing ? '处理中...' : '开始处理' }}
              </button>
            </div>
          </div>
        </div>

        <!-- 右侧：处理任务和进度 -->
        <div class="progress-section">
          <!-- 处理任务列表 -->
          <div class="tasks-card glass-card">
            <div class="card-header">
              <h2 class="card-title">
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke="currentColor" stroke-width="2"/>
                  <polyline points="14,2 14,8 20,8" stroke="currentColor" stroke-width="2"/>
                  <line stroke="currentColor" stroke-width="2" x1="16" x2="8" y1="13" y2="13"/>
                  <line stroke="currentColor" stroke-width="2" x1="16" x2="8" y1="17" y2="17"/>
                  <polyline points="10,9 9,10 8,9" stroke="currentColor" stroke-width="2"/>
                </svg>
                处理任务
              </h2>
              <div class="task-summary">
                <span class="summary-item">
                  {{ completedTasks }} / {{ processingTasks.length }} 已完成
                </span>
              </div>
            </div>

            <div class="card-content">
              <div v-if="processingTasks.length === 0" class="empty-tasks">
                <div class="empty-icon">
                  <svg fill="none" viewBox="0 0 24 24">
                    <rect height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="18" x="3" y="3"/>
                    <line stroke="currentColor" stroke-width="2" x1="9" x2="15" y1="9" y2="15"/>
                    <line stroke="currentColor" stroke-width="2" x1="15" x2="9" y1="9" y2="15"/>
                  </svg>
                </div>
                <h3>暂无处理任务</h3>
                <p>选择文件并设置处理选项后，任务将在这里显示</p>
              </div>

              <div v-else class="tasks-list">
                <div
                  v-for="task in processingTasks"
                  :key="task.id"
                  :class="task.status"
                  class="task-item"
                >
                  <div class="task-icon">
                    <svg v-if="task.status === 'pending'" fill="none" viewBox="0 0 24 24">
                      <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                      <polyline points="12,6 12,12 16,14" stroke="currentColor" stroke-width="2"/>
                    </svg>
                    <svg v-else-if="task.status === 'processing'" class="spinner" fill="none" viewBox="0 0 24 24">
                      <circle cx="12" cy="12" fill="none" r="10" stroke="currentColor" stroke-dasharray="31.416" stroke-dashoffset="31.416" stroke-width="4"/>
                    </svg>
                    <svg v-else-if="task.status === 'completed'" fill="none" viewBox="0 0 24 24">
                      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" stroke="currentColor" stroke-width="2"/>
                      <polyline points="22,4 12,14.01 9,11.01" stroke="currentColor" stroke-width="2"/>
                    </svg>
                    <svg v-else-if="task.status === 'error'" fill="none" viewBox="0 0 24 24">
                      <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                      <line stroke="currentColor" stroke-width="2" x1="15" x2="9" y1="9" y2="15"/>
                      <line stroke="currentColor" stroke-width="2" x1="9" x2="15" y1="9" y2="15"/>
                    </svg>
                  </div>

                  <div class="task-content">
                    <div class="task-header">
                      <h4 class="task-name">{{ task.fileName }}</h4>
                      <span class="task-operation">{{ getOperationLabel(task.operation) }}</span>
                    </div>
                    <div class="task-progress">
                      <div class="progress-bar">
                        <div
                          :style="{ width: task.progress + '%' }"
                          class="progress-fill"
                        ></div>
                      </div>
                      <span class="progress-text">{{ task.progress }}%</span>
                    </div>
                    <div v-if="task.error" class="task-error">
                      <span>错误: {{ task.error }}</span>
                    </div>
                    <div v-if="task.status === 'completed'" class="task-result">
                      <button class="download-btn" @click="downloadResult(task)">
                        <svg fill="none" viewBox="0 0 24 24">
                          <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" stroke="currentColor" stroke-width="2"/>
                        </svg>
                        下载
                      </button>
                    </div>
                  </div>

                  <div class="task-actions">
                    <button
                      v-if="task.status === 'pending'"
                      class="cancel-btn"
                      @click="cancelTask(task.id)"
                    >
                      <svg fill="none" viewBox="0 0 24 24">
                        <line stroke="currentColor" stroke-width="2" x1="18" x2="6" y1="6" y2="18"/>
                        <line stroke="currentColor" stroke-width="2" x1="6" x2="18" y1="6" y2="18"/>
                      </svg>
                    </button>
                    <button
                      v-if="task.status === 'error'"
                      class="retry-btn"
                      @click="retryTask(task.id)"
                    >
                      <svg fill="none" viewBox="0 0 24 24">
                        <polyline points="23 4 23 10 17 10" stroke="currentColor" stroke-width="2"/>
                        <polyline points="1 20 1 14 7 14" stroke="currentColor" stroke-width="2"/>
                        <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" stroke="currentColor" stroke-width="2"/>
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <div v-if="processingTasks.length > 0" class="card-footer">
              <div class="bulk-actions">
                <button :disabled="!hasProcessingTasks" class="action-btn" @click="pauseAllTasks">
                  <svg fill="none" viewBox="0 0 24 24">
                    <rect height="16" stroke="currentColor" stroke-width="2" width="4" x="6" y="4"/>
                    <rect height="16" stroke="currentColor" stroke-width="2" width="4" x="14" y="4"/>
                  </svg>
                  暂停全部
                </button>
                <button :disabled="completedTasks === 0" class="action-btn" @click="clearCompletedTasks">
                  <svg fill="none" viewBox="0 0 24 24">
                    <polyline points="3,6 5,6 21,6" stroke="currentColor" stroke-width="2"/>
                    <path d="M19,6v14a2,2 0 0,1 -2,2H7a2,2 0 0,1 -2,-2V6m3,0V4a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2" stroke="currentColor" stroke-width="2"/>
                  </svg>
                  清除已完成
                </button>
                <button :disabled="completedTasks === 0" class="action-btn primary" @click="downloadAllResults">
                  <svg fill="none" viewBox="0 0 24 24">
                    <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" stroke="currentColor" stroke-width="2"/>
                  </svg>
                  下载全部
                </button>
              </div>
            </div>
          </div>

          <!-- 处理统计 -->
          <div class="stats-card glass-card">
            <div class="card-header">
              <h2 class="card-title">
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M3 3v4h4M3 7v10a4 4 0 004 4h10M21 21v-4h-4M21 17V7a4 4 0 00-4-4H7" stroke="currentColor" stroke-width="2"/>
                </svg>
                处理统计
              </h2>
            </div>

            <div class="card-content">
              <div class="stats-grid">
                <div class="stat-item">
                  <div class="stat-icon success">
                    <svg fill="none" viewBox="0 0 24 24">
                      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" stroke="currentColor" stroke-width="2"/>
                      <polyline points="22,4 12,14.01 9,11.01" stroke="currentColor" stroke-width="2"/>
                    </svg>
                  </div>
                  <div class="stat-details">
                    <span class="stat-value">{{ completedTasks }}</span>
                    <span class="stat-label">已完成</span>
                  </div>
                </div>

                <div class="stat-item">
                  <div class="stat-icon processing">
                    <svg fill="none" viewBox="0 0 24 24">
                      <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                      <polyline points="12,6 12,12 16,14" stroke="currentColor" stroke-width="2"/>
                    </svg>
                  </div>
                  <div class="stat-details">
                    <span class="stat-value">{{ processingCount }}</span>
                    <span class="stat-label">处理中</span>
                  </div>
                </div>

                <div class="stat-item">
                  <div class="stat-icon error">
                    <svg fill="none" viewBox="0 0 24 24">
                      <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                      <line stroke="currentColor" stroke-width="2" x1="15" x2="9" y1="9" y2="15"/>
                      <line stroke="currentColor" stroke-width="2" x1="9" x2="15" y1="9" y2="15"/>
                    </svg>
                  </div>
                  <div class="stat-details">
                    <span class="stat-value">{{ errorTasks }}</span>
                    <span class="stat-label">失败</span>
                  </div>
                </div>

                <div class="stat-item">
                  <div class="stat-icon info">
                    <svg fill="none" viewBox="0 0 24 24">
                      <path d="M7 10l5-5 5 5M12 5v12" stroke="currentColor" stroke-width="2"/>
                    </svg>
                  </div>
                  <div class="stat-details">
                    <span class="stat-value">{{ formatFileSize(totalProcessedSize) }}</span>
                    <span class="stat-label">已处理</span>
                  </div>
                </div>
              </div>

              <div class="overall-progress">
                <div class="progress-header">
                  <span class="progress-label">总体进度</span>
                  <span class="progress-percentage">{{ overallProgress }}%</span>
                </div>
                <div class="progress-bar">
                  <div
                    :style="{ width: overallProgress + '%' }"
                    class="progress-fill"
                  ></div>
                </div>
              </div>

              <div class="processing-time">
                <div class="time-item">
                  <span class="time-label">已用时间:</span>
                  <span class="time-value">{{ formatTime(elapsedTime) }}</span>
                </div>
                <div class="time-item">
                  <span class="time-label">预计剩余:</span>
                  <span class="time-value">{{ formatTime(estimatedTime) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Notify } from '@opentiny/vue'
import {
  batchImageProcess,
  batchAddTags,
  getBatchTaskStatus,
  type BatchTask
} from '@/api/media'

const router = useRouter()

interface ProcessingTask {
  id: string
  fileName: string
  operation: string
  status: 'pending' | 'processing' | 'completed' | 'error'
  progress: number
  error?: string
  result?: any
  startTime?: Date
  endTime?: Date
}

interface ConvertOptions {
  targetFormat: string
  quality: number
}

interface ImageOptions {
  width?: number
  height?: number
  keepAspectRatio: boolean
  brightness: number
  contrast: number
  saturation: number
  addWatermark: boolean
  watermarkText: string
  watermarkPosition: string
  watermarkOpacity: number
}

interface CompressOptions {
  level: 'low' | 'medium' | 'high'
  enableSizeLimit: boolean
  maxSize: number
  sizeUnit: 'KB' | 'MB'
}

interface RenameOptions {
  mode: 'prefix' | 'suffix' | 'replace' | 'template'
  prefix: string
  suffix: string
  findText: string
  replaceText: string
  template: string
}

interface MetadataOptions {
  tags: string[]
  description: string
  author: string
  copyright: string
  location: string
  latitude?: number
  longitude?: number
}

// 响应式数据
const selectedFiles = ref<File[]>([])
const processingTasks = ref<ProcessingTask[]>([])
const isDragging = ref(false)
const isProcessing = ref(false)
const activeTab = ref('convert')
const newTag = ref('')
const startTime = ref<Date | null>(null)

// 处理选项
const convertOptions = ref<ConvertOptions>({
  targetFormat: 'jpeg',
  quality: 90
})

const imageOptions = ref<ImageOptions>({
  width: undefined,
  height: undefined,
  keepAspectRatio: true,
  brightness: 0,
  contrast: 0,
  saturation: 0,
  addWatermark: false,
  watermarkText: '',
  watermarkPosition: 'bottom-right',
  watermarkOpacity: 50
})

const compressOptions = ref<CompressOptions>({
  level: 'medium',
  enableSizeLimit: false,
  maxSize: 1,
  sizeUnit: 'MB'
})

const renameOptions = ref<RenameOptions>({
  mode: 'prefix',
  prefix: '',
  suffix: '',
  findText: '',
  replaceText: '',
  template: 'IMG_{index}_{date}'
})

const metadataOptions = ref<MetadataOptions>({
  tags: [],
  description: '',
  author: '',
  copyright: '',
  location: '',
  latitude: undefined,
  longitude: undefined
})

// 操作标签页配置
const operationTabs = [
  {
    id: 'convert',
    label: '格式转换',
    icon: () => h('svg', { viewBox: '0 0 24 24', fill: 'none' }, [
      h('path', { d: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z', stroke: 'currentColor', 'stroke-width': '2' }),
      h('polyline', { points: '14,2 14,8 20,8', stroke: 'currentColor', 'stroke-width': '2' })
    ])
  },
  {
    id: 'image',
    label: '图片处理',
    icon: () => h('svg', { viewBox: '0 0 24 24', fill: 'none' }, [
      h('rect', { x: '3', y: '3', width: '18', height: '18', rx: '2', ry: '2', stroke: 'currentColor', 'stroke-width': '2' }),
      h('circle', { cx: '8.5', cy: '8.5', r: '1.5', stroke: 'currentColor', 'stroke-width': '2' }),
      h('polyline', { points: '21,15 16,10 5,21', stroke: 'currentColor', 'stroke-width': '2' })
    ])
  },
  {
    id: 'compress',
    label: '压缩优化',
    icon: () => h('svg', { viewBox: '0 0 24 24', fill: 'none' }, [
      h('path', { d: 'M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3', stroke: 'currentColor', 'stroke-width': '2' })
    ])
  },
  {
    id: 'rename',
    label: '批量重命名',
    icon: () => h('svg', { viewBox: '0 0 24 24', fill: 'none' }, [
      h('path', { d: 'M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7', stroke: 'currentColor', 'stroke-width': '2' }),
      h('path', { d: 'M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z', stroke: 'currentColor', 'stroke-width': '2' })
    ])
  },
  {
    id: 'metadata',
    label: '元数据',
    icon: () => h('svg', { viewBox: '0 0 24 24', fill: 'none' }, [
      h('circle', { cx: '12', cy: '12', r: '10', stroke: 'currentColor', 'stroke-width': '2' }),
      h('line', { x1: '2', y1: '12', x2: '6', y2: '12', stroke: 'currentColor', 'stroke-width': '2' }),
      h('line', { x1: '18', y1: '12', x2: '22', y2: '12', stroke: 'currentColor', 'stroke-width': '2' }),
      h('line', { x1: '12', y1: '2', x2: '12', y2: '6', stroke: 'currentColor', 'stroke-width': '2' }),
      h('line', { x1: '12', y1: '18', x2: '12', y2: '22', stroke: 'currentColor', 'stroke-width': '2' })
    ])
  }
]

// 计算属性
const totalSize = computed(() => {
  return selectedFiles.value.reduce((sum, file) => sum + file.size, 0)
})

const completedTasks = computed(() => {
  return processingTasks.value.filter(task => task.status === 'completed').length
})

const processingCount = computed(() => {
  return processingTasks.value.filter(task => task.status === 'processing').length
})

const errorTasks = computed(() => {
  return processingTasks.value.filter(task => task.status === 'error').length
})

const hasProcessingTasks = computed(() => {
  return processingTasks.value.some(task => task.status === 'processing')
})

const totalProcessedSize = computed(() => {
  return processingTasks.value
    .filter(task => task.status === 'completed')
    .reduce((sum, task) => sum + (task.result?.size || 0), 0)
})

const overallProgress = computed(() => {
  if (processingTasks.value.length === 0) return 0
  const totalProgress = processingTasks.value.reduce((sum, task) => sum + task.progress, 0)
  return Math.round(totalProgress / processingTasks.value.length)
})

const elapsedTime = computed(() => {
  if (!startTime.value) return 0
  return Math.floor((Date.now() - startTime.value.getTime()) / 1000)
})

const estimatedTime = computed(() => {
  if (processingTasks.value.length === 0 || completedTasks.value === 0) return 0
  const avgTimePerTask = elapsedTime.value / completedTasks.value
  const remainingTasks = processingTasks.value.length - completedTasks.value
  return Math.floor(avgTimePerTask * remainingTasks)
})

// 页面初始化
onMounted(() => {
  // 检查是否有预选的文件（从媒体列表页面传递）
  const preselectedFiles = history.state?.selectedFiles
  if (preselectedFiles && Array.isArray(preselectedFiles)) {
    // 这里需要将文件ID转换为File对象，实际项目中需要调用API获取文件信息
    console.log('预选文件:', preselectedFiles)
  }
})

// 工具函数
const formatFileSize = (bytes: number): string => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

const formatTime = (seconds: number): string => {
  if (seconds < 60) return `${seconds}秒`
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = seconds % 60
  if (minutes < 60) return `${minutes}分${remainingSeconds}秒`
  const hours = Math.floor(minutes / 60)
  const remainingMinutes = minutes % 60
  return `${hours}时${remainingMinutes}分`
}

const getFilePreview = (file: File): string => {
  return URL.createObjectURL(file)
}

const getFileTypeClass = (type: string): string => {
  if (type.startsWith('image/')) return 'image'
  if (type.startsWith('video/')) return 'video'
  if (type.startsWith('audio/')) return 'audio'
  return 'document'
}

const getFileTypeIcon = (type: string) => {
  const className = getFileTypeClass(type)
  const iconMap = {
    image: () => h('svg', { viewBox: '0 0 24 24', fill: 'none' }, [
      h('rect', { x: '3', y: '3', width: '18', height: '18', rx: '2', ry: '2', stroke: 'currentColor', 'stroke-width': '2' }),
      h('circle', { cx: '8.5', cy: '8.5', r: '1.5', stroke: 'currentColor', 'stroke-width': '2' }),
      h('polyline', { points: '21,15 16,10 5,21', stroke: 'currentColor', 'stroke-width': '2' })
    ]),
    video: () => h('svg', { viewBox: '0 0 24 24', fill: 'none' }, [
      h('polygon', { points: '23,7 16,12 23,17', fill: 'currentColor' }),
      h('rect', { x: '1', y: '5', width: '15', height: '14', rx: '2', ry: '2', stroke: 'currentColor', 'stroke-width': '2', fill: 'none' })
    ]),
    audio: () => h('svg', { viewBox: '0 0 24 24', fill: 'none' }, [
      h('path', { d: 'M9 18V5l12-2v13', stroke: 'currentColor', 'stroke-width': '2' }),
      h('circle', { cx: '6', cy: '18', r: '3', stroke: 'currentColor', 'stroke-width': '2' }),
      h('circle', { cx: '18', cy: '16', r: '3', stroke: 'currentColor', 'stroke-width': '2' })
    ]),
    document: () => h('svg', { viewBox: '0 0 24 24', fill: 'none' }, [
      h('path', { d: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z', stroke: 'currentColor', 'stroke-width': '2' }),
      h('polyline', { points: '14,2 14,8 20,8', stroke: 'currentColor', 'stroke-width': '2' })
    ])
  }
  return iconMap[className] || iconMap.document
}

const getFileTypeLabel = (type: string): string => {
  if (type.startsWith('image/')) return '图片'
  if (type.startsWith('video/')) return '视频'
  if (type.startsWith('audio/')) return '音频'
  return '文档'
}

const getOperationLabel = (operation: string): string => {
  const operationMap = {
    convert: '格式转换',
    image: '图片处理',
    compress: '压缩优化',
    rename: '批量重命名',
    metadata: '元数据编辑'
  }
  return operationMap[operation] || operation
}

const generateNewName = (originalName: string, index: number): string => {
  const extension = originalName.split('.').pop()
  const nameWithoutExt = originalName.replace(`.${extension}`, '')

  switch (renameOptions.value.mode) {
    case 'prefix':
      return `${renameOptions.value.prefix}${originalName}`
    case 'suffix':
      return `${nameWithoutExt}${renameOptions.value.suffix}.${extension}`
    case 'replace':
      return originalName.replace(renameOptions.value.findText, renameOptions.value.replaceText)
    case 'template':
      const date = new Date().toISOString().split('T')[0]
      return renameOptions.value.template
        .replace('{index}', (index + 1).toString().padStart(3, '0'))
        .replace('{date}', date)
        .replace('{name}', nameWithoutExt) + `.${extension}`
    default:
      return originalName
  }
}

// 文件处理函数
const openFileBrowser = () => {
  const input = document.createElement('input')
  input.type = 'file'
  input.multiple = true
  input.accept = 'image/*,video/*,audio/*,.pdf,.doc,.docx'
  input.addEventListener('change', (e) => {
    const files = Array.from((e.target as HTMLInputElement).files || [])
    addFiles(files)
  })
  input.click()
}

const handleDrop = (e: DragEvent) => {
  e.preventDefault()
  isDragging.value = false

  const files = Array.from(e.dataTransfer?.files || [])
  addFiles(files)
}

const addFiles = (files: File[]) => {
  const newFiles = files.filter(file => {
    // 过滤已存在的文件
    return !selectedFiles.value.some(existing =>
      existing.name === file.name && existing.size === file.size
    )
  })

  selectedFiles.value.push(...newFiles)

  if (newFiles.length > 0) {
    Notify({
      type: 'success',
      message: `已添加 ${newFiles.length} 个文件`,
      position: 'top-right'
    })
  }
}

const removeFile = (index: number) => {
  selectedFiles.value.splice(index, 1)
}

const clearSelection = () => {
  selectedFiles.value = []
  Notify({
    type: 'info',
    message: '已清除所有选中的文件',
    position: 'top-right'
  })
}

// 标签处理
const addTag = () => {
  const tag = newTag.value.trim()
  if (tag && !metadataOptions.value.tags.includes(tag)) {
    metadataOptions.value.tags.push(tag)
    newTag.value = ''
  }
}

const removeTag = (tag: string) => {
  const index = metadataOptions.value.tags.indexOf(tag)
  if (index > -1) {
    metadataOptions.value.tags.splice(index, 1)
  }
}

// 主要处理函数
const startProcessing = async () => {
  if (selectedFiles.value.length === 0) return

  isProcessing.value = true
  startTime.value = new Date()

  // 为每个文件创建处理任务
  const tasks: ProcessingTask[] = selectedFiles.value.map((file, index) => ({
    id: `task_${Date.now()}_${index}`,
    fileName: file.name,
    operation: activeTab.value,
    status: 'pending',
    progress: 0
  }))

  processingTasks.value.push(...tasks)

  try {
    // 根据操作类型处理文件
    for (const task of tasks) {
      await processTask(task)
    }

    Notify({
      type: 'success',
      message: '所有文件处理完成',
      position: 'top-right'
    })
  } catch (error) {
    Notify({
      type: 'error',
      message: '处理过程中发生错误',
      position: 'top-right'
    })
  } finally {
    isProcessing.value = false
  }
}

const processTask = async (task: ProcessingTask) => {
  task.status = 'processing'
  task.startTime = new Date()

  try {
    // 模拟处理过程
    for (let i = 0; i <= 100; i += 10) {
      await new Promise(resolve => setTimeout(resolve, 100))
      task.progress = i
    }

    task.status = 'completed'
    task.endTime = new Date()
    task.result = {
      size: Math.floor(Math.random() * 1000000) + 100000,
      url: '#' // 实际项目中这里会是下载URL
    }
  } catch (error) {
    task.status = 'error'
    task.error = '处理失败'
  }
}

// 任务管理函数
const cancelTask = (taskId: string) => {
  const task = processingTasks.value.find(t => t.id === taskId)
  if (task && task.status === 'pending') {
    task.status = 'error'
    task.error = '用户取消'
  }
}

const retryTask = async (taskId: string) => {
  const task = processingTasks.value.find(t => t.id === taskId)
  if (task) {
    task.status = 'pending'
    task.progress = 0
    task.error = undefined
    await processTask(task)
  }
}

const pauseAllTasks = () => {
  processingTasks.value.forEach(task => {
    if (task.status === 'processing') {
      task.status = 'pending'
    }
  })
}

const clearCompletedTasks = () => {
  processingTasks.value = processingTasks.value.filter(task => task.status !== 'completed')
}

const downloadResult = (task: ProcessingTask) => {
  if (task.result?.url) {
    // 实际项目中这里会触发文件下载
    window.open(task.result.url, '_blank')
  }
}

const downloadAllResults = () => {
  const completedTasksWithResults = processingTasks.value.filter(
    task => task.status === 'completed' && task.result?.url
  )

  completedTasksWithResults.forEach(task => {
    downloadResult(task)
  })
}

const goBack = () => {
  router.back()
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/glassmorphism.scss';

.media-batch-process-view {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  padding: 2rem 1rem;

  .glass-card {
    @include glass-card;
    margin-bottom: 2rem;
  }

  .page-header {
    max-width: 1400px;
    margin: 0 auto 2rem;

    .header-content {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(20px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.2);
      padding: 1.5rem 2rem;
      border-radius: 16px;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 2rem;
      box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);

      .header-left {
        .back-btn {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.75rem 1.25rem;
          background: rgba(255, 255, 255, 0.15);
          color: white;
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 12px;
          cursor: pointer;
          font-weight: 500;
          transition: all 0.3s ease;
          backdrop-filter: blur(10px);

          &:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
          }

          svg {
            width: 16px;
            height: 16px;
          }
        }
      }

      .header-info {
        text-align: center;

        .page-title {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0.75rem;
          font-size: 1.75rem;
          font-weight: 700;
          color: white;
          margin: 0 0 0.5rem 0;
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

          svg {
            width: 28px;
            height: 28px;
            color: rgba(255, 255, 255, 0.8);
          }
        }

        .page-description {
          color: rgba(255, 255, 255, 0.8);
          font-size: 0.95rem;
          margin: 0;
          line-height: 1.5;
        }
      }

      .header-stats {
        display: flex;
        gap: 2rem;

        .stat-item {
          text-align: center;
          color: white;

          .stat-value {
            display: block;
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 0.25rem;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          }

          .stat-label {
            font-size: 0.8rem;
            opacity: 0.8;
          }
        }
      }
    }
  }

  .main-content {
    max-width: 1400px;
    margin: 0 auto;

    .content-grid {
      display: grid;
      grid-template-columns: 1fr 400px;
      gap: 2rem;

      @media (max-width: 1200px) {
        grid-template-columns: 1fr;
      }
    }
  }

  .operations-section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .file-selector-card,
  .operations-card,
  .tasks-card,
  .stats-card {
    .card-header {
      padding: 1.5rem 1.5rem 1rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;

      .card-title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 1.1rem;
        font-weight: 600;
        color: white;
        margin: 0;

        svg {
          width: 18px;
          height: 18px;
          color: rgba(255, 255, 255, 0.8);
        }
      }

      .card-actions {
        display: flex;
        gap: 0.75rem;

        .select-btn,
        .clear-btn {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.5rem 1rem;
          border-radius: 8px;
          border: 1px solid rgba(255, 255, 255, 0.2);
          cursor: pointer;
          transition: all 0.2s ease;
          font-size: 0.9rem;
          font-weight: 500;
          backdrop-filter: blur(10px);

          svg {
            width: 14px;
            height: 14px;
          }

          &.select-btn {
            background: rgba(59, 130, 246, 0.2);
            color: white;
            border-color: rgba(59, 130, 246, 0.3);

            &:hover {
              background: rgba(59, 130, 246, 0.3);
            }
          }

          &.clear-btn {
            background: rgba(239, 68, 68, 0.1);
            color: #fca5a5;
            border-color: rgba(239, 68, 68, 0.2);

            &:hover:not(:disabled) {
              background: rgba(239, 68, 68, 0.2);
            }

            &:disabled {
              opacity: 0.5;
              cursor: not-allowed;
            }
          }
        }
      }

      .task-summary {
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.9rem;

        .summary-item {
          padding: 0.25rem 0.75rem;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 12px;
        }
      }
    }

    .card-content {
      padding: 1.5rem;
    }

    .card-footer {
      padding: 1rem 1.5rem;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
  }

  .drop-zone {
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.05);
    margin-bottom: 1.5rem;

    &.active {
      border-color: rgba(59, 130, 246, 0.6);
      background: rgba(59, 130, 246, 0.1);
    }

    .drop-zone-content {
      .drop-icon {
        width: 48px;
        height: 48px;
        margin: 0 auto 1rem;
        color: rgba(255, 255, 255, 0.6);
      }

      h3 {
        color: white;
        font-size: 1.1rem;
        font-weight: 600;
        margin: 0 0 0.5rem 0;
      }

      p {
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.9rem;
        margin: 0;
      }
    }
  }

  .selected-files {
    .files-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
      padding-bottom: 0.75rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      .files-count {
        color: white;
        font-weight: 500;
      }

      .files-size {
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.9rem;
      }
    }

    .files-list {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      max-height: 300px;
      overflow-y: auto;

      .file-item {
        display: flex;
        gap: 1rem;
        padding: 0.75rem;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        transition: all 0.2s ease;

        &:hover {
          background: rgba(255, 255, 255, 0.1);
        }

        .file-thumbnail {
          width: 48px;
          height: 48px;
          border-radius: 6px;
          overflow: hidden;
          flex-shrink: 0;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .file-icon {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.7);

            &.image {
              background: rgba(59, 130, 246, 0.2);
              color: #93c5fd;
            }

            &.video {
              background: rgba(239, 68, 68, 0.2);
              color: #fca5a5;
            }

            &.audio {
              background: rgba(16, 185, 129, 0.2);
              color: #6ee7b7;
            }

            &.document {
              background: rgba(245, 158, 11, 0.2);
              color: #fcd34d;
            }

            svg {
              width: 20px;
              height: 20px;
            }
          }
        }

        .file-info {
          flex: 1;
          min-width: 0;

          .file-name {
            color: white;
            font-size: 0.9rem;
            font-weight: 500;
            margin: 0 0 0.25rem 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .file-meta {
            display: flex;
            gap: 1rem;
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.6);

            .file-size,
            .file-type {
              margin: 0;
            }
          }
        }

        .remove-file {
          width: 32px;
          height: 32px;
          background: rgba(239, 68, 68, 0.1);
          border: none;
          border-radius: 50%;
          color: #fca5a5;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          transition: all 0.2s ease;

          &:hover {
            background: rgba(239, 68, 68, 0.2);
          }

          svg {
            width: 14px;
            height: 14px;
          }
        }
      }
    }
  }

  .operation-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0.25rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;

    .tab-btn {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.75rem 1rem;
      background: none;
      border: none;
      border-radius: 6px;
      color: rgba(255, 255, 255, 0.7);
      cursor: pointer;
      transition: all 0.2s ease;
      font-size: 0.9rem;
      font-weight: 500;

      &:hover {
        background: rgba(255, 255, 255, 0.1);
        color: white;
      }

      &.active {
        background: rgba(59, 130, 246, 0.3);
        color: white;
      }

      svg {
        width: 16px;
        height: 16px;
      }
    }
  }

  .operation-panel {
    .panel-title {
      color: white;
      font-size: 1rem;
      font-weight: 600;
      margin: 0 0 1.5rem 0;
    }

    .option-group {
      margin-bottom: 2rem;

      .option-label {
        display: block;
        color: white;
        font-size: 0.9rem;
        font-weight: 500;
        margin-bottom: 0.75rem;
      }
    }

    // 格式转换选项
    .conversion-options {
      .format-select {
        width: 100%;
        padding: 0.75rem;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        color: white;
        font-size: 0.9rem;

        &:focus {
          outline: none;
          border-color: rgba(59, 130, 246, 0.5);
        }

        option {
          background: #374151;
          color: white;
        }

        optgroup {
          background: #4b5563;
          color: #d1d5db;
          font-weight: 600;
        }
      }

      .quality-slider {
        display: flex;
        align-items: center;
        gap: 1rem;

        .slider {
          flex: 1;
          height: 6px;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 3px;
          appearance: none;
          cursor: pointer;

          &::-webkit-slider-thumb {
            appearance: none;
            width: 20px;
            height: 20px;
            background: #3b82f6;
            border-radius: 50%;
            cursor: pointer;
          }
        }

        .quality-value {
          color: white;
          font-weight: 500;
          min-width: 45px;
          text-align: right;
        }
      }
    }

    // 图片处理选项
    .image-options {
      .resize-controls {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        margin-bottom: 1rem;

        .size-input {
          label {
            display: block;
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.8rem;
            margin-bottom: 0.25rem;
          }

          input {
            width: 100%;
            padding: 0.5rem;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 6px;
            color: white;
            font-size: 0.9rem;

            &:focus {
              outline: none;
              border-color: rgba(59, 130, 246, 0.5);
            }
          }
        }

        .checkbox-label {
          grid-column: 1 / -1;
          display: flex;
          align-items: center;
          gap: 0.5rem;
          color: white;
          font-size: 0.9rem;
          margin-top: 0.5rem;

          input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: #3b82f6;
          }
        }
      }

      .enhancement-controls {
        display: flex;
        flex-direction: column;
        gap: 1rem;

        .enhancement-item {
          display: flex;
          align-items: center;
          gap: 1rem;

          label {
            min-width: 80px;
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.9rem;
          }

          input[type="range"] {
            flex: 1;
            height: 6px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
            appearance: none;
            cursor: pointer;

            &::-webkit-slider-thumb {
              appearance: none;
              width: 20px;
              height: 20px;
              background: #3b82f6;
              border-radius: 50%;
              cursor: pointer;
            }
          }

          span {
            min-width: 45px;
            color: white;
            font-weight: 500;
            text-align: right;
            font-size: 0.9rem;
          }
        }
      }

      .watermark-controls {
        .checkbox-label {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          color: white;
          font-size: 0.9rem;
          margin-bottom: 1rem;

          input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: #3b82f6;
          }
        }

        .watermark-settings {
          display: flex;
          flex-direction: column;
          gap: 1rem;
          padding: 1rem;
          background: rgba(255, 255, 255, 0.05);
          border-radius: 8px;

          input[type="text"],
          select {
            padding: 0.5rem;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 6px;
            color: white;
            font-size: 0.9rem;

            &:focus {
              outline: none;
              border-color: rgba(59, 130, 246, 0.5);
            }
          }

          select option {
            background: #374151;
            color: white;
          }

          .opacity-control {
            display: flex;
            align-items: center;
            gap: 1rem;

            label {
              min-width: 60px;
              color: rgba(255, 255, 255, 0.8);
              font-size: 0.9rem;
            }

            input[type="range"] {
              flex: 1;
              height: 6px;
              background: rgba(255, 255, 255, 0.1);
              border-radius: 3px;
              appearance: none;
              cursor: pointer;

              &::-webkit-slider-thumb {
                appearance: none;
                width: 20px;
                height: 20px;
                background: #3b82f6;
                border-radius: 50%;
                cursor: pointer;
              }
            }

            span {
              min-width: 45px;
              color: white;
              font-weight: 500;
              text-align: right;
              font-size: 0.9rem;
            }
          }
        }
      }
    }

    // 压缩选项
    .compress-options {
      .compression-levels {
        display: flex;
        flex-direction: column;
        gap: 1rem;

        .radio-label {
          display: flex;
          align-items: flex-start;
          gap: 0.75rem;
          cursor: pointer;

          input[type="radio"] {
            width: 20px;
            height: 20px;
            accent-color: #3b82f6;
            margin-top: 0.125rem;
          }

          .radio-content {
            flex: 1;

            strong {
              display: block;
              color: white;
              font-size: 0.95rem;
              margin-bottom: 0.25rem;
            }

            span {
              color: rgba(255, 255, 255, 0.7);
              font-size: 0.85rem;
            }
          }
        }
      }

      .size-limit-controls {
        .checkbox-label {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          color: white;
          font-size: 0.9rem;
          margin-bottom: 1rem;

          input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: #3b82f6;
          }
        }

        .size-limit-input {
          display: flex;
          gap: 0.5rem;

          input[type="number"] {
            flex: 1;
            padding: 0.5rem;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 6px;
            color: white;
            font-size: 0.9rem;

            &:focus {
              outline: none;
              border-color: rgba(59, 130, 246, 0.5);
            }
          }

          select {
            padding: 0.5rem;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 6px;
            color: white;
            font-size: 0.9rem;

            &:focus {
              outline: none;
              border-color: rgba(59, 130, 246, 0.5);
            }

            option {
              background: #374151;
              color: white;
            }
          }
        }
      }
    }

    // 重命名选项
    .rename-options {
      .naming-rules {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;

        .radio-label {
          display: flex;
          align-items: flex-start;
          gap: 0.75rem;
          cursor: pointer;

          input[type="radio"] {
            width: 20px;
            height: 20px;
            accent-color: #3b82f6;
            margin-top: 0.5rem;
          }

          .radio-content {
            flex: 1;

            strong {
              display: block;
              color: white;
              font-size: 0.95rem;
              margin-bottom: 0.75rem;
            }

            input[type="text"] {
              width: 100%;
              padding: 0.5rem;
              background: rgba(255, 255, 255, 0.1);
              border: 1px solid rgba(255, 255, 255, 0.2);
              border-radius: 6px;
              color: white;
              font-size: 0.9rem;

              &:focus {
                outline: none;
                border-color: rgba(59, 130, 246, 0.5);
              }

              &:disabled {
                opacity: 0.5;
                cursor: not-allowed;
              }
            }

            .replace-inputs {
              display: flex;
              gap: 0.5rem;

              input {
                flex: 1;
              }
            }
          }
        }
      }

      .rename-preview {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        padding: 1rem;

        .preview-item {
          display: flex;
          align-items: center;
          gap: 1rem;
          margin-bottom: 0.75rem;
          font-size: 0.9rem;

          &:last-child {
            margin-bottom: 0;
          }

          .original-name {
            color: rgba(255, 255, 255, 0.7);
          }

          svg {
            width: 16px;
            height: 16px;
            color: rgba(255, 255, 255, 0.5);
          }

          .new-name {
            color: #93c5fd;
            font-weight: 500;
          }
        }

        .more-files {
          color: rgba(255, 255, 255, 0.6);
          font-size: 0.85rem;
          text-align: center;
          margin-top: 0.75rem;
          padding-top: 0.75rem;
          border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
      }
    }

    // 元数据选项
    .metadata-options {
      .tags-input {
        .current-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 0.5rem;
          margin-bottom: 0.75rem;

          .tag-item {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.25rem 0.5rem;
            background: rgba(59, 130, 246, 0.2);
            color: white;
            border-radius: 15px;
            font-size: 0.8rem;

            button {
              background: none;
              border: none;
              color: inherit;
              cursor: pointer;
              padding: 0;
              display: flex;
              align-items: center;

              svg {
                width: 12px;
                height: 12px;
              }
            }
          }
        }

        input[type="text"] {
          width: 100%;
          padding: 0.5rem;
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 6px;
          color: white;
          font-size: 0.9rem;

          &:focus {
            outline: none;
            border-color: rgba(59, 130, 246, 0.5);
          }
        }
      }

      textarea {
        width: 100%;
        padding: 0.75rem;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        color: white;
        font-size: 0.9rem;
        resize: vertical;
        font-family: inherit;

        &:focus {
          outline: none;
          border-color: rgba(59, 130, 246, 0.5);
        }
      }

      .copyright-inputs,
      .location-inputs {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;

        input[type="text"],
        input[type="number"] {
          padding: 0.5rem;
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 6px;
          color: white;
          font-size: 0.9rem;

          &:focus {
            outline: none;
            border-color: rgba(59, 130, 246, 0.5);
          }
        }
      }

      .coordinates {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
      }
    }
  }

  .process-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    background: rgba(59, 130, 246, 0.3);
    color: white;
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
    width: 100%;
    justify-content: center;

    &:hover:not(:disabled) {
      background: rgba(59, 130, 246, 0.4);
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(59, 130, 246, 0.25);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }

    svg {
      width: 18px;
      height: 18px;

      &.spinner {
        animation: spin 1s linear infinite;
      }
    }
  }

  // 任务列表样式
  .empty-tasks {
    text-align: center;
    padding: 3rem 2rem;

    .empty-icon {
      width: 64px;
      height: 64px;
      margin: 0 auto 1rem;
      color: rgba(255, 255, 255, 0.3);

      svg {
        width: 100%;
        height: 100%;
      }
    }

    h3 {
      color: white;
      font-size: 1.1rem;
      font-weight: 600;
      margin: 0 0 0.5rem 0;
    }

    p {
      color: rgba(255, 255, 255, 0.6);
      font-size: 0.9rem;
      margin: 0;
    }
  }

  .tasks-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .task-item {
      display: flex;
      gap: 1rem;
      padding: 1rem;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 8px;
      transition: all 0.2s ease;

      &:hover {
        background: rgba(255, 255, 255, 0.1);
      }

      &.completed {
        background: rgba(16, 185, 129, 0.1);
      }

      &.error {
        background: rgba(239, 68, 68, 0.1);
      }

      .task-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;

        svg {
          width: 20px;
          height: 20px;

          &.spinner {
            animation: spin 1s linear infinite;
          }
        }

        .task-item.pending & {
          background: rgba(156, 163, 175, 0.2);
          color: #9ca3af;
        }

        .task-item.processing & {
          background: rgba(59, 130, 246, 0.2);
          color: #3b82f6;
        }

        .task-item.completed & {
          background: rgba(16, 185, 129, 0.2);
          color: #10b981;
        }

        .task-item.error & {
          background: rgba(239, 68, 68, 0.2);
          color: #ef4444;
        }
      }

      .task-content {
        flex: 1;
        min-width: 0;

        .task-header {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          margin-bottom: 0.5rem;

          .task-name {
            color: white;
            font-size: 0.9rem;
            font-weight: 500;
            margin: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1;
          }

          .task-operation {
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.8rem;
            margin-left: 1rem;
            flex-shrink: 0;
          }
        }

        .task-progress {
          display: flex;
          align-items: center;
          gap: 1rem;
          margin-bottom: 0.5rem;

          .progress-bar {
            flex: 1;
            height: 6px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
            overflow: hidden;

            .progress-fill {
              height: 100%;
              background: #3b82f6;
              border-radius: 3px;
              transition: width 0.3s ease;
            }
          }

          .progress-text {
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.8rem;
            min-width: 45px;
            text-align: right;
          }
        }

        .task-error {
          color: #fca5a5;
          font-size: 0.8rem;
          margin-bottom: 0.5rem;
        }

        .task-result {
          .download-btn {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            background: rgba(16, 185, 129, 0.2);
            color: #6ee7b7;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 0.8rem;
            font-weight: 500;

            &:hover {
              background: rgba(16, 185, 129, 0.3);
            }

            svg {
              width: 14px;
              height: 14px;
            }
          }
        }
      }

      .task-actions {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;

        .cancel-btn,
        .retry-btn {
          width: 32px;
          height: 32px;
          border: none;
          border-radius: 50%;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.2s ease;

          svg {
            width: 14px;
            height: 14px;
          }
        }

        .cancel-btn {
          background: rgba(239, 68, 68, 0.1);
          color: #fca5a5;

          &:hover {
            background: rgba(239, 68, 68, 0.2);
          }
        }

        .retry-btn {
          background: rgba(245, 158, 11, 0.1);
          color: #fcd34d;

          &:hover {
            background: rgba(245, 158, 11, 0.2);
          }
        }
      }
    }
  }

  .bulk-actions {
    display: flex;
    gap: 0.75rem;

    .action-btn {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 8px;
      color: white;
      cursor: pointer;
      transition: all 0.2s ease;
      font-size: 0.9rem;
      font-weight: 500;

      &:hover:not(:disabled) {
        background: rgba(255, 255, 255, 0.15);
      }

      &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      &.primary {
        background: rgba(59, 130, 246, 0.2);
        border-color: rgba(59, 130, 246, 0.3);

        &:hover:not(:disabled) {
          background: rgba(59, 130, 246, 0.3);
        }
      }

      svg {
        width: 16px;
        height: 16px;
      }
    }
  }

  // 统计卡片样式
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;

    .stat-item {
      display: flex;
      gap: 0.75rem;
      padding: 1rem;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 8px;

      .stat-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;

        svg {
          width: 20px;
          height: 20px;
        }

        &.success {
          background: rgba(16, 185, 129, 0.2);
          color: #10b981;
        }

        &.processing {
          background: rgba(59, 130, 246, 0.2);
          color: #3b82f6;
        }

        &.error {
          background: rgba(239, 68, 68, 0.2);
          color: #ef4444;
        }

        &.info {
          background: rgba(156, 163, 175, 0.2);
          color: #9ca3af;
        }
      }

      .stat-details {
        flex: 1;

        .stat-value {
          display: block;
          color: white;
          font-size: 1.25rem;
          font-weight: 700;
          margin-bottom: 0.25rem;
        }

        .stat-label {
          color: rgba(255, 255, 255, 0.6);
          font-size: 0.8rem;
        }
      }
    }
  }

  .overall-progress {
    margin-bottom: 1.5rem;

    .progress-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.5rem;

      .progress-label {
        color: white;
        font-size: 0.9rem;
        font-weight: 500;
      }

      .progress-percentage {
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.9rem;
        font-weight: 600;
      }
    }

    .progress-bar {
      height: 8px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 4px;
      overflow: hidden;

      .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #3b82f6, #10b981);
        border-radius: 4px;
        transition: width 0.5s ease;
      }
    }
  }

  .processing-time {
    display: flex;
    justify-content: space-between;
    gap: 1rem;

    .time-item {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;

      .time-label {
        color: rgba(255, 255, 255, 0.6);
        font-size: 0.8rem;
      }

      .time-value {
        color: white;
        font-size: 0.9rem;
        font-weight: 500;
      }
    }
  }

  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  // 响应式设计
  @media (max-width: 1200px) {
    .main-content .content-grid {
      grid-template-columns: 1fr;

      .progress-section {
        order: -1;
      }
    }
  }

  @media (max-width: 768px) {
    padding: 1rem 0.5rem;

    .page-header .header-content {
      grid-template-columns: 1fr;
      text-align: center;
      gap: 1rem;

      .header-stats {
        justify-content: center;
      }
    }

    .operation-tabs {
      flex-wrap: wrap;
    }

    .stats-grid {
      grid-template-columns: 1fr;
    }

    .processing-time {
      flex-direction: column;
    }
  }
}
</style>
